<page-header> </page-header>
<quick-menu>
  <nz-list [nzBordered]="false" [nzSplit]="false">
    <nz-list-item>
      <a routerLink="/">Home</a>
    </nz-list-item>
    <nz-list-item>
      <a routerLink="/widgets">Widgets</a>
    </nz-list-item>
  </nz-list>
</quick-menu>
<div nz-row nzGutter="16">
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">{{ onlineUsers + '/' + totalUsers }}</div>
        <p class="text-nowrap mb0">{{ 'mxk.home.onlineUsers' | i18n }}/{{ 'mxk.home.totalUsers' | i18n }}</p>
      </div>
      <div nz-col nzSpan="12">
        <g2-mini-bar
          *ngIf="simulateData"
          height="35"
          color="#fff"
          borderWidth="3"
          [padding]="[5, 30]"
          [data]="simulateData"
          tooltipType="mini"
          (ready)="fixDark($event)"
        ></g2-mini-bar>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">{{ newUsers }}</div>
        <p class="text-nowrap mb0">{{ 'mxk.home.newUsers' | i18n }}</p>
      </div>
      <div nz-col nzSpan="12">
        <g2-mini-bar
          *ngIf="simulateData"
          height="35"
          color="#fff"
          borderWidth="3"
          [padding]="[5, 30]"
          [data]="simulateData"
          tooltipType="mini"
          (ready)="fixDark($event)"
        ></g2-mini-bar>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">{{ totalDepts }}</div>
        <p class="text-nowrap mb0">{{ 'mxk.home.totalDepts' | i18n }}</p>
      </div>
      <div nz-col nzSpan="12">
        <g2-mini-bar
          *ngIf="simulateData"
          height="35"
          color="#fff"
          borderWidth="3"
          [padding]="[5, 30]"
          [data]="simulateData"
          tooltipType="mini"
          (ready)="fixDark($event)"
        ></g2-mini-bar>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-magenta rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">{{ totalApps }}</div>
        <p class="text-nowrap mb0">{{ 'mxk.home.totalApps' | i18n }}</p>
      </div>
      <div nz-col nzSpan="12">
        <g2-mini-bar
          *ngIf="simulateData"
          height="35"
          color="#fff"
          borderWidth="3"
          [padding]="[5, 30]"
          [data]="simulateData"
          tooltipType="mini"
          (ready)="fixDark($event)"
        ></g2-mini-bar>
      </div>
    </div>
  </div>
</div>
<div nz-row nzGutter="16">
  <div nz-col nzXs="24" nzMd="24">
    <nz-card [nzBordered]="false" [nzTitle]="dayAccessTitle">
      <ng-template #dayAccessTitle>
        {{ 'mxk.home.dayAccessCount' | i18n }}-
        <nz-badge [nzCount]="dayCount" [nzOffset]="[20, 6]" [nzStyle]="{ backgroundColor: '#52c41a' }">
          <a class="head-badge">{{ 'mxk.home.dayCount' | i18n }}</a>
        </nz-badge>
      </ng-template>
      <!--<g2-bar *ngIf="dayData" height="275" [data]="dayData" color="#fa8c16"></g2-bar>-->
      <g2-bar *ngIf="dayData" height="275" [data]="dayData"></g2-bar>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzMd="24">
    <nz-card [nzTitle]="monthAccessTitle" [nzBordered]="false">
      <ng-template #monthAccessTitle>
        {{ 'mxk.home.monthAccessCount' | i18n }}-
        <nz-badge [nzCount]="activeUsers" [nzOffset]="[20, 6]" [nzStyle]="{ backgroundColor: '#52c41a' }">
          <a class="head-badge">{{ 'mxk.home.activeUsers' | i18n }}</a>
        </nz-badge>
      </ng-template>
      <g2-bar *ngIf="mouthData" height="275" [data]="mouthData"></g2-bar>
    </nz-card>
  </div>

  <div nz-col nzXs="24" nzMd="24">
    <nz-card [nzTitle]="monthProvinceAccessCount" [nzBordered]="false">
      <ng-template #monthProvinceAccessCount>
        {{ 'mxk.home.monthProvinceAccessCount' | i18n }}
        <nz-radio-group [(ngModel)]="mapType" nzButtonStyle="solid">
          <label nz-radio-button nzValue="china">{{ 'mxk.home.maptype.china' | i18n }}</label>
          <label nz-radio-button nzValue="world">{{ 'mxk.home.maptype.world' | i18n }}</label>
        </nz-radio-group>
      </ng-template>
      <div style="display: flex">
        <!-- 地图-->
        <div id="mapChart" style="width: 900px; height: 500px;display: {{ mapType == 'china' ? 'block' : 'none' }}"></div>
        <div>
          <nz-table
            #basicTable
            [nzData]="top10ProvinceTableData"
            [nzFrontPagination]="false"
            style="width: 450px;display: {{ mapType == 'china' ? 'block' : 'none' }}"
          >
            <thead>
              <tr>
                <th style="width: 20%; text-align: center">{{ 'mxk.home.number' | i18n }}</th>
                <th style="width: 50%; text-align: center">{{ 'mxk.home.province' | i18n }}</th>
                <th style="width: 30%; text-align: center">{{ 'mxk.home.accessPV' | i18n }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of top10ProvinceTableData; let i = index">
                <td style="text-align: center">{{ i + 1 }}</td>
                <td style="text-align: center">{{ data.reportstring }}</td>
                <td style="text-align: center">{{ data.reportcount }}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
        <!-- 地图-->
        <div id="worldMapChart" style="width: 900px; height: 500px;display: {{ mapType == 'world' ? 'block' : 'none' }}"></div>
        <div>
          <nz-table
            #basicTable
            [nzData]="top10WorldTableData"
            [nzFrontPagination]="false"
            style="width: 450px;display: {{ mapType == 'world' ? 'block' : 'none' }}"
          >
            <thead>
              <tr>
                <th style="width: 20%; text-align: center">{{ 'mxk.home.number' | i18n }}</th>
                <th style="width: 50%; text-align: center">{{ 'mxk.home.country' | i18n }}</th>
                <th style="width: 30%; text-align: center">{{ 'mxk.home.accessPV' | i18n }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of top10WorldTableData; let i = index">
                <td style="text-align: center">{{ i + 1 }}</td>
                <td style="text-align: center">{{ data.reportstring }}</td>
                <td style="text-align: center">{{ data.reportcount }}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzMd="12">
    <nz-card [nzTitle]="monthAppTitle" [nzBordered]="false">
      <ng-template #monthAppTitle> {{ 'mxk.home.monthAppCount' | i18n }} </ng-template>
      <nz-table #basicTable [nzData]="reportApp" [nzFrontPagination]="false">
        <thead>
          <tr>
            <th>{{ 'mxk.home.appName' | i18n }}</th>
            <th>{{ 'mxk.home.accessCount' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of reportApp">
            <td>{{ data.appname }}</td>
            <td>{{ data.reportcount }}</td>
          </tr>
        </tbody>
      </nz-table>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzMd="12">
    <nz-card [nzTitle]="monthBrowserTitle" [nzBordered]="false">
      <ng-template #monthBrowserTitle> {{ 'mxk.home.monthBrowserCount' | i18n }} </ng-template>
      <nz-table #basicTable [nzData]="reportBrowser" [nzFrontPagination]="false">
        <thead>
          <tr>
            <th>{{ 'mxk.home.browser' | i18n }}</th>
            <th>{{ 'mxk.home.accessCount' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of reportBrowser">
            <td>{{ data.reportstring }}</td>
            <td>{{ data.reportcount }}</td>
          </tr>
        </tbody>
      </nz-table>
    </nz-card>
  </div>
</div>
